<template>
	<view style="background-color:#F7F7F7 ;">
		<view class="device-list">
			<view class="order-total">
				<view class="item">
					<view class="t0">订单</view>
					<view class="t1">{{ user.today_count_amount }}</view>
				</view>
				<view class="item">
					<view class="t0">合计(元)</view>
					<view class="t1">{{ user.today_sum_amount }}</view>
				</view>
			</view>
			<z-paging ref="paging" class="device-list-box" v-model="datalist" @query="getAgentStatistics" default-page-size="20" :auto="false" :fixed="false" height="65vh">
				<template #top>
					<view class="item-title">
						<view class="t0">名称</view>
						<view class="t1">笔数</view>
						<view class="t2">合计收入</view>
					</view>
				</template>
				<view class="device-list-item" v-for="(item, i) in datalist" :key="i">
					<view class="t0">
						{{ item.user_data }}
					</view>
					<view class="t1">{{ item.count }}</view>
					<view class="t2">{{ item.divide_amount }}</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>
<script>
	import api from '@/api/index2.js';
	export default {
		data() {
			return {
				user: {
					today_sum_amount: 0,
					today_count_amount: 0
				},
				datalist: [],
				dataTotal: 0
			};
		},
		onShow() {
			this.getAgentStatistics(1, 20);
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				api.getUserInfo().then(res => {
					this.user = res.data;
				});
			},
			getAgentStatistics(pageNo, pageSize) {
				api.getAgentStatistics({
					page: pageNo,
					limit: pageSize,
				}).then(res => {
					this.dataTotal = res.data.total
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.device-list {
		background: url('../../static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
		padding-bottom: 100rpx;
		padding: 28rpx;

		.order-total {
			background: url('../../static/images/user/group1.png') no-repeat;
			background-size: 100% 100%;
			padding: 48rpx 0;
			margin: 0 -10rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.item {
				text-align: center;

				.t0 {
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
				}

				.t1 {
					font-weight: 600;
					font-size: 44rpx;
					color: #49a1fd;
					line-height: 60rpx;
					text-align: center;
				}
			}
		}

		.device-list-box {
			padding: 40rpx 0 100rpx;
			border-radius: 20rpx;
			position: relative;
			margin: 0 -4rpx 20rpx -2rpx;
			background: linear-gradient(180deg, #DFFAFF 0%, #FFFFFF 40%);

			.item-title {
				display: flex;
				align-items: center;
				font-weight: 550;
				font-size: 30rpx;
				color: #000000;
				line-height: 92rpx;
				border-bottom: 2rpx solid #d3ebff;
				padding: 0 28rpx;

				.t0 {
					width: 50%;
				}

				.t1 {
					width: 25%;
					text-align: center;
				}

				.t2 {
					width: 25%;
					text-align: center;
				}
			}

			.device-list-item {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #000000;
				line-height: 92rpx;
				border-bottom: 2rpx solid #d3ebff;
				padding: 0 28rpx;

				uni-image {
					width: 14rpx;
					height: 24rpx;
					text-align: right;
				}

				.t0 {
					width: 50%;
				}

				.t1 {
					width: 25%;
					text-align: center;
				}

				.t2 {
					width: 25%;
					text-align: center;
				}
			}

			.more-tip {
				font-size: 28rpx;
				color: #a7a5a5;
				line-height: 40rpx;
				text-align: center;
				margin-top: 40rpx;
			}
		}

		.btn {
			background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
			border-radius: 44rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 88rpx !important;
			text-align: right;
			height: 88rpx;
			margin: 36rpx 28rpx;
			width: calc(100% - 56rpx);
			text-align: center;
			border: none;

			&:after {
				border: none;
			}
		}

		.empty-box {
			margin: 0 -20rpx;
			text-align: center;
			background: url('../../static/images/home/empty-bg.png') no-repeat;
			padding: 200rpx 0 160rpx;
			background-size: 100% 100%;

			uni-image {
				width: 400rpx;
				height: 340rpx;
			}

			uni-text {
				font-size: 28rpx;
				color: #a7a5a5;
				line-height: 40rpx;
				margin-top: 50rpx;
				display: block;
			}
		}
	}
</style>